<template>
  <div class="auto-search">
    <el-input type="text" v-model="value" @input="handleInput" @change="handleChange" @focus="handleFocus" @blur="handleBlur" @clear="handleClear" @keydown.up.native.prevent="highlight('up')" @keydown.down.native.prevent="highlight('down')" @keydown.enter.native="handleKeyEnter" autocomplete="off" placeholder="请输入内容"></el-input>
    <div class="search" id="search">
      <div class="search-box">
        <div class="search-list" v-for="(item,index) in list" :key="index">
          <h4>{{ item.title }}</h4>
          <div :id="tag.account" :data-index="index" v-for="(tag,i) in item.accountList" :key="i" :class="['account-list',tag.account == selectAccount?'highlighted':'']" @click="handleClick(item)" @mouseover="mouseover(tag,index)">
            <p>{{ tag.name }}</p>
            <small>{{ tag.account }}</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  data () {
    return {
      value: '',
      isShow: false,
      selectAccount: null,
      typeIndex: 0,
      allList: [],
      list: [
        {
          title: '好友',
          accountList: [
            { name: 'Saimen', account: 5536641 },
            { name: 'Jame', account: 6412312 },
            { name: 'jone', account: 123454 },
            { name: 'susun', account: 135456 },
            { name: 'advv', account: 634612 },
            { name: 'fdsff', account: 654742 }
          ]
        }, {
          title: '客户',
          accountList: [
            { name: '小明', account: 1254312 },
            { name: '小红', account: 1235235 },
            { name: '小霞', account: 1565756 },
            { name: '小哥', account: 5125125 },
            { name: '小小', account: 4565745 }
          ]
        }, {
          title: '同事',
          accountList: [
            { name: 'pppp', account: 142355 }
          ]
        }
      ]
    }
  },
  methods: {
    // search
    packList () {
      const allList = document.getElementsByClassName('account-list')
      this.allList = [...allList]
      const { id, dataset } = this.allList[0]
      this.selectAccount = id
      this.typeIndex = Number(dataset.index)
    },
    handleInput () {

    },
    handleChange () {

    },
    handleFocus () {
      this.isShow = true
      this.$nextTick(() => {
        this.packList()
      })
    },
    handleBlur: _.debounce(
      function () {
        this.isShow = false
      }, 200
    ),
    handleClear () {

    },
    highlight (type) {
      const selectIndex = this.allList.findIndex(val => val.id == this.selectAccount)
      if ((type == 'up' && selectIndex == 0) || (type == 'down' && (selectIndex == this.allList.length - 1))) return
      const num = selectIndex + (type == 'up' ? -1 : +1)
      const { id, dataset } = this.allList[num]
      this.selectAccount = id
      this.typeIndex = Number(dataset.index)
      this.$nextTick(() => {
        const suggestion = document.getElementById('search')
        const highlightItem = this.allList[num]
        const scrollTop = suggestion.scrollTop
        const offsetTop = highlightItem.offsetTop
        if (offsetTop + highlightItem.scrollHeight > scrollTop + suggestion.clientHeight) {
          suggestion.scrollTop += (highlightItem.scrollHeight + 5)
        }
        if (offsetTop < scrollTop) {
          suggestion.scrollTop -= (highlightItem.scrollHeight + 5)
        }
      })
    },
    mouseover (item, index) {
      this.selectAccount = item.account
      this.typeIndex = index
    },
    // 获取列表数据
    handleKeyEnter () {
      const accountList = this.list[this.typeIndex].accountList
      const account = accountList.find(val => val.account == this.selectAccount)
      console.log(account, '123999')
    },
    handleClick (item) {
      console.log(item, 'dianjile')
    }
  }
}
</script>
<style lang="scss">
.highlighted {
  background: #f3f3f3;
}
.auto-search {
  position: relative;
}
.search {
  margin: 5px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-sizing: border-box;
  background-color: #fff;
  width: 300px;
  height: 500px;
  flex-direction: column;
  display: flex;
  overflow-y: scroll;
  position: absolute;
  top: 40px;
  left: 0px;
  .search-box {
    flex: 1;
  }
  h4 {
    margin: 0;
    border-bottom: 1px solid #ededed;
    padding: 10px 15px;
  }
  .account-list {
    border-bottom: 1px solid #ededed;
    padding: 8px 15px;
  }
  p {
    margin: 0;
  }
  small {
    color: #999;
  }
}
</style>
